import './progress-bar-with-2-value.css'
var ProgressBarWith2Value = {
    name: 'ProgressBarWith2Value',
    template: '<div class="progress-bar-with-2-value" :style="{height: height, lineHeight: height, backgroundColor: backgroundColor}">\n' +
        '    <div class="progress" :style="{backgroundColor: color1}" ref="progress1">{{value1}}</div>\n' +
        '    <div class="progress" :style="{backgroundColor: color2}" ref="progress2">{{value2}}</div>\n' +
        '  </div>',
    props: {
        value1: {
            type: Number,
            default: function () {
                return 0
            },
            validate: function (value) {
                return value >= 0
            }
        },
        value2: {
            type: Number,
            default: function () {
                return 0
            },
            validate: function (value) {
                return value >= 0
            }
        },
        height: {
            type: String,
            default: function () {
                return '5px'
            }
        },
        backgroundColor: {
            type: String,
            default: function () {
                return 'rgba(66,160,222,0.2)'
            }
        },
        color1: {
            type: String,
            default: function () {
                return '#24dcf7'
            }
        },
        color2: {
            type: String,
            default: function () {
                return '#ff0000'
            }
        }
    },
    mounted: function () {
        var self = this
        var total = parseFloat(this.value1 + this.value2)
        self.$refs.progress1.style.width = (parseFloat(this.value1) / total * 100.0) + '%';
        self.$refs.progress2.style.width = (parseFloat(this.value2) / total * 100.0) + '%';
    },
}